<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js"></script>

<!-- 用户列表 -->
<style>
	th {text-align: center;	}
	
	.table>tbody>tr>td {
		
		text-align: center;
		margin: 0px;
	}
	
	.bg {
		background: none;
		border: none;
	}
	
	.uploadify-button-text {
		display: inline-flex;
	}
	
	.uploadify-button-text button {
		margin: -10px;
	}
	
	#iocn img {
		height: 90px;
		width: 120px;
	}
	
	#iocn ul {
		margin: 0px;
		padding: 0px;
	}
	
	#iocn li {
		margin: 0px;
		padding: 0px;
		position: relative;
		display: inline-block;
		width: 120px;
		height: 90px;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		float: left;
		margin-right: 10px;
		border: 1px #ccc solid;
		background-color: #f0f0f0;
	}
	
	#iocn li a {
		display: inline-block;
		position: absolute;
		bottom: 0px;
		left: 0px;
		text-align: center;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		color: red;
		cursor: pointer;
	}
	
	#iocn li:hover a {
		background-color: rgba(0, 0, 0, 0.8);
	}
</style>
<div id="data_page" class="in_page">
	<div class="panel panel-default">
		<div class="panel-body">
			<form class="form-inline" method="get" name="keyword" id="keyword">
				<div class="form-group">
					分类管理
				</div>
			</form>
		</div>
	</div>
	<table class="table table-striped table-bordered table-condensed  ">
		<thead>
			<tr>
				<th >分类</th>
				<th >操作</th>
			</tr>
		</thead>
		<tbody>
			<volist name="list" id="li">
				<tr>
					<!-- <td><img src="{$li.cate_img}"  width="50px" height="50px"/></td> -->
					<td style="text-align: left;text-indent:80px;">{$li.category}</td>
					<td style="text-align:center;">
						<button type="button" class="btn btn-sm btn-success add" p_id="{$li.id}" data-toggle="modal" data-target="#add_two">添加二级分类</button>
					</td>
				</tr>
				<volist name="li['son']" id="data">
					<tr>

						<td style="text-indent:100px; text-align: left;">|---{$data.category}</td>
						<td style="text-align:center;">
							<button type="button" class="btn btn-sm btn-danger del" d_id={$data.id}>删除</button>
							<button type="button" class="btn btn-sm btn-warning update" d_id={$data.id} data-toggle="modal" data-target="#update_two">修改</button>
						</td>
					</tr>
				</volist>
			</volist>
		</tbody>
	</table>
</div>


<div class="modal fade" id="add_two" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" >添加分类</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  >
					<input type="hidden" value="" id="pid"/>
					<div class="form-group">
						<label for="category" class="col-sm-2 control-label">分类名称:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" name="category" id="category" >
						</div>
					</div>
	                <div class="form-group">
	                    <label class="col-sm-2 control-label">系统:</label>
	                    <div class="col-sm-10">
	                        <label for="system1" class="control-label">
	                            <input type="checkbox" name="systems" value="android">Android
	                        </label>
	                        <label for="system2" class="control-label">
	                            <input type="checkbox" name="systems" value="ios">Ios
	                        </label>
	                    </div>
	                </div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" id="baocun">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>


<div class="modal fade" id="update_two" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" >修改分类</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  >
					<input type="hidden" value="" id="uid"/>
					<div class="form-group">
						<label for="category" class="col-sm-2 control-label">分类名称:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" name="category" id="cate" >
						</div>
					</div>
	                <div class="form-group">
	                    <label class="col-sm-2 control-label">系统:</label>
	                    <div class="col-sm-10">
	                        <label for="system1" class="control-label">
	                            <input type="checkbox" name="systems" value="android">Android
	                        </label>
	                        <label for="system2" class="control-label">
	                            <input type="checkbox" name="systems" value="ios">Ios
	                        </label>
	                    </div>
	                </div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" id="save">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>

<script language="javascript">
	$(function() {
		$(".add").click(function() {
			var pid = $(this).attr('p_id');
			$("#pid").val(pid);
			$("#add_two").find("[type='checkbox']").each(function(index, el) {
				el.checked = false;
			});
		});
		$("#baocun").click(function() {
			var category = $('#category').val();
			var pid = $("#pid").val();
			var systems = '';
			$("#add_two").find("[type='checkbox']:checked").each(function(index, el) {
				systems +=(systems ? ',':'')+$(el).val();
			});
			var url = "{:U('Category/add_two')}";
			$.post(url, {category: category,pid: pid, systems:systems}, function(obj) {
				if(obj.s) {
					alert(obj.m);
					location.reload();
				}
			});
		});

		$(".update").click(function() {
			var id = $(this).attr("d_id");
			$("#uid").val(id);
			var url = "{:U('Category/update_two')}?id=" + id;

			$("#update_two").find("[type='checkbox']").each(function(index, el) {
				el.checked = false;
			});
			$.get(url, function(obj) {
				if(obj.s) {
					var info = obj.d;
					$("#cate").val(info.category);
					if(info.systems.indexOf('android')!==-1){
						$("#update_two").find("[type='checkbox']").each(function(index, el) {
							if($(el).val() == 'android'){
								el.checked = true;
							}
						});
					}
					if(info.systems.indexOf('ios')!==-1){
						$("#update_two").find("[type='checkbox']").each(function(index, el) {
							if($(el).val() == 'ios'){
								el.checked = true;
							}
						});
					}
				}
			});
		});

		$("#save").click(function() {
		 	var id=$("#uid").val();
			var category = $('#cate').val();
			var url = "{:U('Category/update')}";
			var systems = '';
			$("#update_two").find("[type='checkbox']:checked").each(function(index, el) {
				systems +=(systems ? ',':'')+$(el).val();
			});
			$.post(url, {category:category,id: id, systems:systems}, function(obj) {
				if(obj.s) {
					alert(obj.m);
					location.reload();
				}
			});
		});

		$('.del').click(function() {
			$_this = $(this);
			var id = $(this).attr('d_id');

			var url = "{:U('Category/del_two')}?id=" + id;
			if(confirm("确认删除吗?")) {
				$.get(url, function(obj) {
					if(obj.s) {
						alert(obj.m);
						$_this.parent().parent().remove();
					}
				});
			}
			return false;
		});
	});
</script>